<template>
    <view>
        <view class="main">
            <uni-forms :modelValue="ruleForm" :rules="rules" ref="ruleForm" label-width="0" validateTrigger="blur">
                <view class="table">
                    <uni-table border :emptyText="$lang('暂无数据')">
                        <uni-tr class="tableHead">
                            <uni-th align="center" v-for="(item,index) in tableColumn" :key="index">{{$lang(item.label)}}</uni-th>
<!--                            <uni-th align="center" v-if="ruleForm.list.length > 1">{{$lang('操作')}}</uni-th>-->
                        </uni-tr>
                        <uni-tr v-for="(item,index) in ruleForm.list" :key="index">
                            <uni-td align="center" v-for="(data,dataIndex) in tableColumn" :key="dataIndex">
                                <text v-if="data.value == 'index'">{{index + 1}}</text>
                                <view v-else-if="data.value == 'image'">
                                    <image :src="baseUrl + item[data.value]" style="width: 100rpx;height: 100rpx;"></image>
                                </view>
                                <view v-else-if="data.value == 'deliverytime'">
                                    <uni-forms-item :name="'list.' + index + '.deliverytime'">
                                        <uni-easyinput v-model="item.deliverytime" :placeholder="$lang('请输入')" />
                                    </uni-forms-item>
                                </view>
                                <view v-else-if="data.value == 'loadingtime'">
                                    <uni-forms-item :name="'list.' + index + '.loadingtime'">
                                        <uni-easyinput v-model="item.loadingtime" :placeholder="$lang('请输入')" />
                                    </uni-forms-item>
                                </view>
                                <view v-else-if="data.value == 'sendtime'">
                                    <uni-forms-item :name="'list.' + index + '.sendtime'">
                                        <uni-easyinput v-model="item.sendtime" :placeholder="$lang('请输入')" />
                                    </uni-forms-item>
                                </view>
                                <view v-else-if="data.value == 'expected_arrival_time'">
                                    <uni-forms-item :name="'list.' + index + '.expected_arrival_time'">
                                        <uni-easyinput v-model="item.expected_arrival_time" :placeholder="$lang('请输入')" />
                                    </uni-forms-item>
                                </view>
                                <view v-else-if="data.value == 'port'">
                                    <uni-forms-item :name="'list.' + index + '.port'">
                                        <uni-easyinput v-model="item.port" :placeholder="$lang('请输入')" />
                                    </uni-forms-item>
                                </view>
                                <view v-else-if="data.value == 'port_address'">
                                    <uni-forms-item :name="'list.' + index + '.port_address'" :rules="rules.required.rules">
                                        <uni-easyinput v-model="item.port_address" :placeholder="$lang('请输入')" />
                                    </uni-forms-item>
                                </view>
                                <view v-else-if="data.value == 'container_num'">
                                    <uni-forms-item :name="'list.' + index + '.container_num'">
                                        <uni-easyinput v-model="item.container_num" :placeholder="$lang('请输入')" />
                                    </uni-forms-item>
                                </view>
                                <text v-else>{{item[data.value]}}</text>
                            </uni-td>
                        </uni-tr>
                    </uni-table>
                </view>
            </uni-forms>
        </view>
        <view class="footerFen"></view>
        <view class="footer">
            <view class="top">
                <view class="fl" @click="$common.back()">{{$lang('取消')}}</view>
                <view class="fr" @click="submit">{{$lang('确定')}}</view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        supplementPageData,
        supplement
    } from '../../api/api'
    export default {
        data() {
            return {
                ruleForm:{
                    list:[],
                },
                rules:{
                    required: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请输入') }
                        ]
                    },
                },
                tableColumn:[
                    {label:this.$lang('序号'),value:'index'},
                    {label:this.$lang('一级分类'),value:'category_one_name'},
                    {label:this.$lang('二级分类'),value:'category_two_name'},
                    {label:this.$lang('三级分类'),value:'category_three_name'},
                    {label:this.$lang('四级分类'),value:'category_four_name'},
                    {label:this.$lang('商品代码'),value:'goods_code'},
                    {label:this.$lang('商品名称'),value:'goods_name'},
                    {label:this.$lang('尺寸(CM)'),value:'size'},
                    {label:this.$lang('图片'),value:'image'},
                    {label:this.$lang('数量'),value:'num'},
                    {label:this.$lang('单位'),value:'unit'},
                    {label:this.$lang('下单时间'),value:'createtime'},
                    {label:this.$lang('交货时间'),value:'deliverytime'},
                    {label:this.$lang('装柜时间'),value:'loadingtime'},
                    {label:this.$lang('发货时间'),value:'sendtime'},
                    {label:this.$lang('预计抵达时间'),value:'expected_arrival_time'},
                    {label:this.$lang('到达港口'),value:'port'},
                    {label:this.$lang('港口地址'),value:'port_address'},
                    {label:this.$lang('货柜号'),value:'container_num'},
                ],
                ids:'',
                baseUrl:''
            }
        },
        onLoad(options) {
            this.baseUrl = this.$config.baseUrl;
            this.ids = JSON.parse((options.ids));
            this.getList();
        },
        methods: {
            submit(){
                this.$refs.ruleForm.validate().then(valid => {
                    supplement(this.ruleForm).then(res => {
                        if(res.code == 1){
                            uni.showToast({
                                title:this.$lang('操作成功'),
                                icon:'none'
                            });
                            setTimeout(() => {
                                this.$common.back();
                                uni.$emit('returnData',1);
                            },500);
                        }
                    })
                }).catch(err => {

                })
            },
            getList(){
                supplementPageData({
                    ids:this.ids
                }).then(res => {
                    this.ruleForm.list = res.data;
                    this.ruleForm.list.forEach(item => {
                        item.category_one_name = item.category_one.name;
                        item.category_two_name = item.category_two.name;
                        item.category_three_name = item.category_three.name;
                        item.category_four_name = item.category_four.name;
                        item.createtime = item.createtime ? this.$common.formatDate(item.createtime * 1000) : '';
                        item.deliverytime = item.deliverytime ? this.$common.formatDate(item.deliverytime * 1000) : '';
                        item.loadingtime = item.loadingtime ? this.$common.formatDate(item.loadingtime * 1000) : '';
                        item.sendtime = item.sendtime ? this.$common.formatDate(item.sendtime * 1000) : '';
                        item.expected_arrival_time = item.expected_arrival_time ? this.$common.formatDate(item.expected_arrival_time * 1000) : '';
                    })
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .main{
        padding: 0 25rpx;
        .table{
            padding-top: 25rpx;
        }
    }
    .footerFen{
        height: 179rpx;
    }
    .footer{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 24rpx 24rpx 45rpx 24rpx;
        background: #fff;
        .top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .fl{
                width: 280rpx;
                height: 90rpx;
                border-radius: 90rpx;
                text-align: center;
                line-height: 90rpx;
                font-size: 36rpx;
                color: #555;
                border: 1px solid #c9c9c9;
                background: #fff;
            }
            .fr{
                width: 400rpx;
                height: 90rpx;
                border-radius: 90rpx;
                text-align: center;
                line-height: 90rpx;
                background: #365aa6;
                color: #fff;
                font-size: 36rpx;
            }
        }
    }
</style>
